{% extends 'base.html' %}

{% block css %}
    <link rel="stylesheet" href="static/assets/dash/ionicons.min.css" />
    <link rel="stylesheet" href="static/assets/dash/AdminLTE.min.css" />
{% endblock %}

{% block titleinfo %}
    <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
            <i class="home-icon blue"> 仪表盘 </i>
        </ul>
    </div>
{% endblock %}

{% block webinfo %}


    <div class="row">
        <div class="col-xs-12">
        {#    顶部方块开始#}
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-red"><i class="fa fa-bug"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">当前漏洞数</span>
                  <span class="info-box-number">{{ vul_count }}</span>
                  <a href="vulnerability-management" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
              </div>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-viacoin"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">当前插件数</span>
                  <span class="info-box-number">{{ plugin_count }}</span>
                  <a href="plugin-management" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
              </div>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-green"><i class="fa fa-calendar-minus-o"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">当前任务数</span>
                  <span class="info-box-number">{{ task_count }}</span>
                  <a href="task-management" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
              </div>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-yellow"><i class="fa fa-server"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">当前资产数</span>
                  <span class="info-box-number">{{ asset_count }}</span>
                  <a href="asset-management" class="small-box-footer"> More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
              </div>
            </div>
            {#    顶部方块结束#}

            <!-- 漏洞趋势开始 -->
            <div class="col-xs-7">
              <div class="box box-warning">
                <div class="box-header with-border">
                  <h3 class="box-title">一周漏洞趋势</h3>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <canvas id="vul_canvas" height="400"></canvas>
                  </div>
                </div>
              </div>
            </div>
            <!-- 漏洞趋势结束 -->

            <div class="col-xs-5">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title"> 漏洞分布 </h3>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <canvas id="vul_stats" height="400"></canvas>
                  </div>
                </div>
              </div>
            </div>

{#            底部rss文章#}
            <div class="row">
                <div class="col-xs-12">
                    <div class="col-xs-4">
                        <div class="box box-success">
                            <div class="box-header with-border">
                              <h3 class="box-title"> 安全文章 </h3>
                            </div>
                            <div class="box-body">
                              <div id="freebufRss"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4" >
                        <div class="box box-danger">
                            <div class="box-header with-border">
                              <h3 class="box-title"> 漏洞预警 </h3>
                            </div>
                            <div class="box-body">
                              <div id="360Rss"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="box box-info">
                            <div class="box-header with-border">
                              <h3 class="box-title"> 最新插件 </h3>
                            </div>
                            <div class="box-body">
                              <div id="seebugRss"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
{#    end#}
    </div>
{% block js %}

    <script>
        var vul_ctx = document.getElementById("vul_canvas").getContext('2d');
        var vul_stats = document.getElementById("vul_stats").getContext('2d');
        var vulChart = new Chart(vul_ctx, {
            type: 'line',
            data: {
                labels: [
                    {% for vul_date in vul_day_count_dict['date'] %}
                    '{{ vul_date }}',
                    {% endfor %}
                ],
                datasets: [{
                    label: '# 漏洞数',
                    data: [
                        {% for count in vul_day_count_dict['count'] %}
                            {{ count }},
                        {% endfor %}
                    ],
                    borderColor: '#1cb9e7',
                    borderWidth: 2,
                    fill: false,
                }
                ],
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                        }
                    }]
                },

            }
        });

        var myChart = new Chart(vul_stats, {
            type: 'pie',
            data: {
                labels: [
                    {% for a in plugin_stats_name %}
                        '{{ a }}',
                    {% endfor %}
                ],
                datasets: [{
                    label: '# of Votes',
                    data: [
                        {% for i in plugin_stats_count %}
                                {{ i }},
                        {% endfor %}
                    ],
                    backgroundColor: [
                        '#1abc9c',
                        '#3498db',
                        '#9b59b6',
                        '#f1c40f',
                        '#e67e22',
                        '#e74c3c',
                        '#2c3e50',
                        '#f39c12',
                        '#badc58',
                        '#7ed6df'
                    ],

                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

        $(document).ready(function () {
            $('#seebugRss').FeedEk({
              FeedUrl:'https://www.seebug.org/rss/new/',
              MaxCount: 6,
              ShowDesc: false,
              ShowPubDate: false,
            });

            $('#freebufRss').FeedEk({
              FeedUrl:'http://www.freebuf.com/feed',
              MaxCount: 6,
              ShowDesc: false,
              ShowPubDate: false,
            });

            $('#360Rss').FeedEk({
              FeedUrl:'https://cert.360.cn/feed',
              MaxCount: 6,
              ShowDesc: false,
              ShowPubDate: false,
            });
        });
    </script>
    <script src="static/assets/js/Chart.min.js"></script>
    <script src="static/assets/js/FeedEk.js"></script>
{% endblock %}

{% endblock %}